<template>
	<view class="container  animated fadeIn">
		<!-- 导航栏 -->
		<homenavbar />

		<!-- logo区域 -->
		<!-- <view @tap="flag = !flag">
			<view class="position-fixed logo rounded-10 animated rubberBand" v-if="flag" :class="'opacity-' + opacityVal" :style="'top: calc( ' + s + ' + 20rpx);'">
				<image src="https://qny.hongfyun.com/FgVhc21yaQ-7oWiwwq-s8PVw8M-W" mode=""></image>
			</view>

			<view class="position-fixed logo rounded-10 animated swing" v-else :class="'opacity-' + opacityVal" :style="'top: calc( ' + sumHeight + ' + 20rpx);'">
				<image src="https://qny.hongfyun.com/FgVhc21yaQ-7oWiwwq-s8PVw8M-W" mode=""></image>
			</view>
		</view> -->

		<scroll-view @scroll="scroll" scroll-y="true" :style="'height:calc(100vh - ' + sumHeight + ')'" @scrolltolower="scrolltolower">
			<!-- 轮播 -->
			<u-swiper :list="swiperList" height="346" interval="5000"></u-swiper>

			<!-- 通知公告 --> 
			<noticeList :data="noticeList" />
			<line />

			<!-- 我的园区 -->
			<myPark />
			<line />

			<!-- 最新咨询  newActive-->
			<newActive title="园区咨询" :activeList="activeList" :statesType="statesType"/>
		</scroll-view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { NewsPage } from '@/api/home/index.js'

import homenavbar from '@/components/home/navbar.vue';
import noticeList from '@/components/home/notice_list.vue';
import myPark from '@/components/home/my_parking.vue';
import newActive from '@/components/common/new_active.vue';

export default {
	components: {
		homenavbar,
		noticeList,
		myPark,
		newActive
	},
	data() {
		return {
			statesType:'loadmore',
			flag: true,
			titleBarHeight: '',
			statusBarHeight: '',
			sumHeight: '',
			swiperList: [
				{
					image: '/static/images/gkbanner2.jpeg'
				},
				{
					image: '/static/images/gkbanner1.jpeg'
				},
				{
					image: '/static/images/gkbanner3.jpeg'
				}
			],
			noticeList: ['党员大会将于今日举行  ', '党员大会将于今日举行  ', '党员大会将于今日举行  ', '党员大会将于今日举行  '],
			activeList:[],
			opacityVal: 0,
			currentPage:1,  // 分页数据
			total:0,
			maxpage:0,
			delFlag:1
		};
	},
	onReady() {
		// 网络请求
		this.getNewsList()
		uni.getSystemInfo({
			success: res => {
				// model设备型号 // iOS // 标题栏高度
				if (res.model.indexOf('iPhone') !== -1) {
					this.titleBarHeight = 44 + 'px';
					this.sumHeight = res.statusBarHeight + 44 + 'px';
				} else {
					// android
					this.titleBarHeight = 48 + 'px';
					this.sumHeight = res.statusBarHeight + 48 + 'px';
				}
				// 状态栏高度
				this.statusBarHeight = res.statusBarHeight + 'px';
			}
		});
	},
	methods: {
		scrolltolower(){
			if(this.currentPage < this.maxpage){
				this.statesType = 'loading'
			}else{
				this.statesType = 'nomore'
				return false
			}
			this.currentPage++
			this.getNewsList()
		},
		async getNewsList(){
			const params={
				currentPage:this.currentPage,
				pageSize:5
			}
			const {result:res} = await NewsPage(params)
			this.total = res.pageModel.total
			this.maxpage = res.pageModel.maxPageCode
			const data = res.data
			data.forEach((v,i)=>{
				data[i].read = 197
				data[i].collect = 200
			})
			this.activeList = this.activeList.concat(data)
		},
		scroll(e) {
			if (e.detail.scrollTop >= 300) {
				this.opacityVal = 100;
				return;
			}
			this.opacityVal = e.detail.scrollTop / 3;
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #f5f5f5;
	height: 100%;
}

.logo {
	background-color: #eee;
	width: 400rpx;
	height: 150rpx;
	left: 20rpx;

	z-index: 2;
}
</style>
